<template>
<view class="page">
	<view class="header-box">
		<view class="icon-nav" @click="goBack()"></view>
		<view class="search-box">
			<picker class="goods-item" @change="typeBtn" range-key="name" :range="typeArr">
				{{type_label}} <text class="icon-tri"></text>
			</picker>
			<view class="line"></view>
			<input type="text" v-model="ruleForm.search" @confirm="onSearch" placeholder="请输入商品..." class="header-input" />
		</view>
	</view>
	<view class="tab-list">
		<view class="item">
			综合 
		</view>
		<view class="item" @click="sort(1)">
			销量 
			<view class="itemActive">
				<text class="icon-tri" :class="{on:tabIndex == 1}"></text>
				<text class="icon-tri" :class="{on:tabIndex == 2}"></text>
			</view>
		</view>
		<view class="item" @click="sort(2)">
			价格 
			<view class="itemActive">
				<text class="icon-tri" :class="{on:tabIndex == 3}"></text>
				<text class="icon-tri" :class="{on:tabIndex == 4}"></text>
			</view>
		</view>
	</view>
	<MallGoods :goodsList="goodsList" class="mt20"></MallGoods>
</view>
</template>

<script>
	import MallGoods from '@/components/mallGoods/mallGoods'
	import { isLogin, shopList } from '@/api/substitution.js'
	
	export default {
		components:{
			MallGoods
		},
		data(){
			return {
				typeArr:[{name:'商品'},{name:'商户'}],
				type_label:'商品',
				goodsList:[],
				tabIndex:0,
				title: '',
				total: 0,
				ruleForm: {
					page: 1,
					sortType: 'all',
					sortPrice: '1',
					category_id: '',
					goods_type: '',
					search: ''
				},
				urlType: ''
			}
		},
		onLoad(e) {
			this.ruleForm.search = e.title
			this.urlType = e.url;
			isLogin()
			
			this.shopList()
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			this.ruleForm.page = 1;
			this.shopList()
		},
		
		// 上拉加载
		onReachBottom() {
			if (this.ruleForm.page < this.total) {
				this.ruleForm.page += 1;
				this.shopList()
			}
		},
		
		methods: {
			typeBtn(event){
				uni.navigateTo({
					url: './merchants?title=' + this.ruleForm.search + '&url=' + this.urlType
				})
			},
			
			// 返回上一页
			goBack () {
				switch (parseInt(this.urlType)) {
					case 1:
						uni.navigateTo({
							url: '/mallShop/home/home'
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/mallShop/cate/cate'
						});
						break;
				}
			},
			
			// 搜索
			onSearch () {
				uni.navigateTo({
					url:'./searchRes?type=' + this.type_label + '&title=' + this.ruleForm.search
				})
			},
			
			// 获取商品列表
			shopList () {
				shopList(this.ruleForm).then(res => {
					if (this.ruleForm.page === 1) {
						this.goodsList = res.data.list.data
						this.total = Math.ceil(res.data.list.total / res.data.list.per_page)
					} else {
						res.data.list.data.forEach(item => {
							this.goodsList.push(item)
						})
					}
				})
				uni.stopPullDownRefresh()
			},
			
			// 进行升降排序,1为销量排序,2为价格排序
			sort(e) {
				if (e === 1) {
					// 1为销量从高到低，2为从低到高
					this.ruleForm.sortType = 'sales'
					
					if (this.tabIndex !== 1 && this.tabIndex !== 2) {
						this.tabIndex = 2
						this.ruleForm.sortPrice = 1;
					} else {
						if (this.tabIndex === 1) {
							this.tabIndex = 2
							this.ruleForm.sortPrice = 1;
						} else {
							this.tabIndex = 1
								this.ruleForm.sortPrice = 0;
						}
					}
				} else {
					// 1为销量从高到低，2为从低到高
					this.ruleForm.sortType = 'price'
					if (this.tabIndex !== 3 && this.tabIndex !== 4) {
						this.tabIndex = 4
						this.ruleForm.sortPrice = 1;
					} else {
						if (this.tabIndex === 3) {
							this.tabIndex = 4
								this.ruleForm.sortPrice = 1;
						} else {
							this.tabIndex = 3
							this.ruleForm.sortPrice = 0;
						}
					}
				}
				
				this.page = 1;
				this.shopList();
			}
			
		},
	}
</script>

<style scoped lang="scss">
	.page {
		display: flex;
		flex-direction: column;
	}
	.icon-tri{
		display: inline-block;
		vertical-align: middle;
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #cdcdcd;
		margin-left:20rpx;
	}
	.mt20{margin-top: 20rpx;}
	.header-box{
		display: flex;
		padding:50rpx 30rpx 20rpx;
		@include  bgGradient();
		height: 80rpx;
		position: relative;
		line-height: 80rpx;
		position: relative;
		align-items: center;
		justify-content: center;
		.icon-nav{
			position: absolute;
			top:60%;
			left: 30rpx;
			transform: translateY(-50%) rotate(-45deg);
			border-top:1px solid #FFF;
			border-left:1px solid #FFF;
			width: 20rpx;
			height: 20rpx;
			flex:0;
		}
		.search-box{
			display: flex;
			background: #FFFFFF;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			.line{
				width: 4rpx;
				height: 50rpx;
				background-color: #EFEFEF;
				position: relative;
				top:50%;
				transform: translateY(-50%);
			}
			.goods-item{
				width: 140rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
			}
			.header-input{
				flex:1;
				background: url('/static/images/mallShop/search.png') no-repeat 10px center;
				background-size:26rpx 26rpx;
				padding-left: 80rpx;
				height: 70rpx;
				color: #333333;
			}
		}
	}
	.tab-list{
		padding:0 30rpx;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		
		.item {
			display: flex;
			align-items: center;
			height: 100%;
			
			.itemActive {
				display: flex;
				flex-direction: column;
				
				.icon-tri {
					&:nth-of-type(1) {
						margin-bottom: 15rpx;
						transform: rotateX(180deg);
					}
					&.on {
						border-top-color: #000 
					}
				}
			}
		}
	}
	
</style>

